@import 'theme';

:host {
  display: grid;
  grid-column-gap: var(--cx-grid-column-gap, 30px);

  @include media-breakpoint-up(lg) {
    grid-template-columns: var(--cx-grid-template-columns, repeat(2, 1fr));
    grid-template-rows: var(--cx-grid-template-row, repeat(7, auto) 1fr);
  }
}

.images {
  @include media-breakpoint-up(lg) {
    grid-column: var(--cx-grid-column, 1);
    grid-row: var(--cx-grid-row, 1 / span 8);
  }
}

.name {
  @include type('1');
}

.code {
  @include type('7');
  color: var(--cx-color, var(--cx-g-color-secondary));
}

.rating {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin: var(--cx-margin, 0 0 12px 0);

  .count {
    margin: var(--cx-margin, 0 20px 0 5px);
  }
}

.price {
  display: inline-block;
  @include type('3');
  font-weight: $font-weight-normal;
}

.quantity {
  label {
    @include type('8');
    margin: var(--cx-margin, 15px 0 10px 0);
  }

  .info {
    @include type('7');
    margin: var(--cx-margin, 0 15px 0 15px);
    color: var(--cx-color, var(--cx-g-color-secondary));
  }
}

cx-add-to-cart {
  margin: var(--cx-margin, 20px 0 10px 0);
}
